<template>
  <van-row>
    <van-nav-bar
      title="客户详情"
      left-arrow
      left-text="返回"
      @click-left="handleBack"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          placement="bottom-end"
          trigger="click"
          :actions="actions"
          @select="handleAction"
        >
          <template #reference>
            <van-icon name="ellipsis" size="20" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-tabs v-model="activeTab" @click="handleTabChange">
      <van-tab title="客户信息">
        <van-cell title="客户号" :value="customerInfo.customerNo" />
        <van-cell title="客户名称" :value="customerInfo.customerName" />
        <van-cell title="联系人" :value="customerInfo.contacts" />
        <van-cell title="联系人手机" :value="customerInfo.phoneNum" />
        <van-cell title="地址" :value="customerInfo.address" />
        <van-cell title="邮箱" :value="customerInfo.email" />
        <van-cell title="备注" :value="customerInfo.remark" />
      </van-tab>
      <van-tab title="历史销售订单">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="tableLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="doPage"
          >
            <van-cell v-for="(item,index) in tableData" :key="index" is-link @click="toOrderDetail(item)">
              <template #title>
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="title right primary">
                  {{ item.quantityNum }}
                </div>
                <div class="right_tag">
                  <order-state-tag v-model="item.orderState" />
                  <priority-tag v-model="item.priority" />
                </div>
              </template>
              <template #label>
                <div class="desc">
                  {{ item.productAttribute }}
                </div>
                <div class="desc">
                  {{ item.orderDate }}
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <van-popup v-model="showSubmit" position="right" :style="{ width: '100%', height: '100%' }">
      <customer-submit-module ref="submitModule" @close="handleClose" />
    </van-popup>
    <van-popup v-model="showOrderDetail" position="right" :style="{ width: '100%', height: '100%' }">
      <order-detail ref="orderDetail" @close="handleClose" />
    </van-popup>
  </van-row>
</template>

<script>
import { deleteCustomer, selectCustomerById } from '@/api/customer'
import { selectSaleOrderPage } from '@/api/saleOrder'
import CustomerSubmitModule from '@/views/customer/customerSubmit.vue'
import { Dialog } from 'vant'
import PriorityTag from '@/components/tag/PriorityTag.vue'
import OrderStateTag from '@/components/tag/OrderStateTag.vue'
import OrderDetail from '@/views/order/orderDetail.vue'

export default {
  name: 'CustomerDetailModule',
  components: { OrderDetail, OrderStateTag, PriorityTag, CustomerSubmitModule },
  data() {
    return {
      activeTab: 0,
      showOrderDetail: false,
      showPopover: false,
      showSubmit: false,
      customerInfo: {},
      tableLoading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      actions: [
        { icon: 'edit', text: '修改', action: 'edit', disabled: false },
        { icon: 'delete-o', text: '删除', action: 'delete', disabled: false }],
      page: {
        page: 1,
        size: 10,
        total: 0,
        query: {
          customerId: ''
        }
      }
    }
  },
  methods: {
    init(id) {
      this.page.query.customerId = id
      selectCustomerById(id).then(resp => {
        if (resp.success) {
          this.customerInfo = resp.data
        }
      })
      // this.handleTabChange()
    },
    doPage() {
      this.tableLoading = true
      selectSaleOrderPage(this.page).then(resp => {
        if (resp.success) {
          if (this.refreshing) {
            this.tableData = []
            this.refreshing = false
          }
          this.tableData = [...this.tableData, ...resp.data.records]
          this.page.total = resp.data.total
          this.finished = this.tableData.length >= resp.data.total
          for (let i = 0; i < resp.data.records.length; i++) {
            const tableDatum = resp.data.records[i]
            tableDatum.title = tableDatum.customerName + ' ' + tableDatum.productInfo.moldName
            tableDatum.quantityNum = tableDatum.quantity + ' ' + tableDatum.productInfo.unit
            tableDatum.productAttribute =
                '颜色:' + tableDatum.productInfo.color +
                ',材质:' + tableDatum.productInfo.material +
                ',尺码:' + tableDatum.productInfo.size +
                ',长度:' + tableDatum.productInfo.length
          }
        }
      }).catch(() => {
        this.finished = true
      }).finally(() => {
        this.tableLoading = false
        this.page.page++
      })
    },
    handleTabChange(row) {
      if (row === 1) {
        this.page.page = 1
        this.refreshing = true
        this.doPage()
      }
    },
    onRefresh() {
      this.page.page = 1
      this.doPage()
    },
    handleAction(row) {
      if (row.action === 'delete') {
        this.doDelete()
      } else if (row.action === 'edit') {
        this.toEdit()
      }
    },
    toEdit() {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init(this.customerInfo.id)
      })
    },
    doDelete() {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除此信息'
      }).then(() => {
        deleteCustomer({ ids: [this.customerInfo.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('删除成功')
            this.$emit('close')
          }
        })
      }).catch(() => {})
    },
    toOrderDetail(row) {
      this.showOrderDetail = true
      this.$nextTick(() => {
        this.$refs.orderDetail.init(row.id)
      })
    },
    handleClose() {
      this.showSubmit = false
      this.showOrderDetail = false
      this.init(this.customerInfo.id)
    },
    handleBack() {
      this.activeTab = 0
      this.tableData = []
      this.$emit('close')
    }
  }
}
</script>

<style scoped>

</style>
